<template>
	<view class="container">
		<view class="orderItem">
			<view class="device_az" v-if="gdxq.workType == 0">
				<view class="orderxq">
					<view class="order_type">
						<view class="a_type">工单类型：</view>
						<view class="b_type" v-if="gdxq.workType == 0">设备安装</view>
						<view class="b_type" v-else-if="gdxq.workType == 1">设备维修</view>
					</view>
					<view class="a_time">{{gdxq.updateTime}}</view>
				</view>
				<view class="xian"></view>
				<view class="order_msg">
					<view class="b_msg">客户名称：{{gdxq.userName}}</view>
					<view class="b_msg">联系人：{{gdxq.contacts}}</view>
					<view class="b_msg">联系电话：{{gdxq.userPhone}}</view>
					<view class="b_msg">设备ID：{{gdxq.deviceId}}</view>
				</view>
			</view>

			<view class="device_wx" v-else-if="gdxq.workType == 1">
				<view class="xq_b">
					<view class="gdwx">
						<view class="order_type">
							<view class="a_type">工单类型：</view>
							<view class="b_type" v-if="gdxq.workType == 0">设备安装</view>
							<view class="b_type" v-else-if="gdxq.workType == 1">设备维修</view>
						</view>
						<view class="a_time">{{gdxq.updateTime}}</view>
					</view>
					<view class="xian"></view>
					<view class="order_msg">
						<view class="b_msg">客户名称：{{gdxq.userName}}</view>
						<view class="b_msg">联系人：{{gdxq.contacts}}</view>
						<view class="b_msg">联系电话：{{gdxq.userPhone}}</view>
						<view class="b_msg">设备ID：{{gdxq.deviceId}}</view>
					</view>
					<view class="xian"></view>
					<view class="gzimage">
						<view class="a_gz">故障照片</view>
						<view class="b_gz">
							<image :src="gdxq.sysFiles1" mode=""></image>
						</view>
					</view>
					<view class="gzms">
						<view class="a_gz">故障描述</view>
						<view class="gz_txt">
							{{gdxq.troubleDesc}}
						</view>
					</view>
				</view>

			</view>
		</view>

		<view class="btnItem">
			<view class="order_btn" @click="getPhone">
				<view class="btnImg">
					<image src="../../../static/image/server/6.png" mode=""></image>
				</view>
				<view class="txt">电话预约</view>
			</view>
			<view class="order_btn" @click="loadingImage">
				<view class="btnImg">
					<image src="../../../static/image/server/7.png" mode=""></image>
				</view>
				<view class="txt">上传照片</view>
			</view>
			<view class="order_btn" @click="invite">
				<view class="btnImg">
					<image src="../../../static/image/server/8.png" mode=""></image>
				</view>
				<view class="txt">邀请评价</view>
			</view>
			<view class="order_btn" @click="accomplish">
				<view class="btnImg">
					<image src="../../../static/image/server/9.png" mode=""></image>
				</view>
				<view class="txt">完成工单</view>
			</view>
		</view>
	</view>
</template>

<script>
	import $http from "@/ajax/http.js";
	import {
		phone
	} from "@/common/mixins/server/phone.js"

	export default {
		mixins: [phone],
		data() {
			return {
				gdxq: [],
				orderId: '',
				userId:''
			}
		},
		onLoad(options) {
			this.orderId = options.id
			this.userId = options.userId
			console.log(options, "++++++++++++");
			this.queryOrderDetail();
		},
		methods: {
			queryOrderDetail() {
				$http.request({
					url: "/waiter/index/queryOrderDetail",
					data: {
						workOrderId: this.orderId
					},
					method: "GET"
				}).then((res) => {
					console.log(res, "工单详情");
					this.gdxq = res
				})
			},
			
			loadingImage(){
				uni.navigateTo({
					url: `/pages/server/loadImage/index?workerId=${this.orderId}`,
				})
			},
			
			invite(){
				$http.request({
					url:'/waiter/index/noticeUserComment',
					data:{
						storeOwnerUserId:this.gdxq.userId,
						workOrderId:this.orderId
					},
					method:'GET'
				}).then((res)=>{
					wx.showModal({
						title:"请确认已完成服务，照片已上传。邀请用户评价后，本次工单方可确认完成。"
					})
				})
			},
			
			accomplish(){
				$http.request({
					url:'/waiter/index/completeWorkOrder',
					data:{
						storeUserId:this.userId,
						workOrderId:this.orderId
					},
					method:'GET'
				}).then((res)=>{
					wx.showModal({
						title:"请确认已完成服务，照片已上传。邀请用户评价后，本次工单方可确认完成。"
					})
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	@import url('../../../common/sass/all/all.scss');

	.device_az {
		width: 682rpx;
		height: 280rpx;
		background-color: #ffffff;
		border-radius: 20rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		margin-top: 60rpx;


		.orderxq {
			width: 590rpx;

			.order_type {
				display: flex;
				flex-direction: row;

				.a_type {
					font-weight: 600;
					font-size: 26rpx;
					color: #3E3A39;
				}

				.b_type {
					font-weight: 600;
					font-size: 26rpx;
					color: #00828c;
				}
			}

			.a_time {
				font-weight: 400;
				font-size: 16rpx;
				color: #9FA0A0;
			}
		}

		.xian {
			width: 590rpx;
			height: 1rpx;
			background-color: #eeeeee;
			margin-top: 24rpx;
			margin-bottom: 22rpx;
		}

		.order_msg {
			width: 590rpx;

			.b_msg {
				font-weight: 400;
				font-size: 21rpx;
				color: #4C4948;
				line-height: 34rpx;
			}
		}
	}

	// 设备维修
	.device_wx {
		width: 678rpx;
		height: 699rpx;
		background-color: #FFFFFF;
		border-radius: 20rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;

		.xq_b {
			width: 594rpx;
			height: 617rpx;

			.gdwx {

				.order_type {
					display: flex;
					flex-direction: row;

					.a_type {
						font-weight: 600;
						font-size: 26rpx;
						color: #3E3A39;
					}

					.b_type {
						font-weight: 600;
						font-size: 26rpx;
						color: #00828c;
					}
				}

				.a_time {
					font-weight: 400;
					font-size: 16rpx;
					color: #9FA0A0;
					margin-left: 5rpx;
				}
			}
		}

		.xian {
			width: 590rpx;
			height: 1rpx;
			background-color: #eeeeee;
			margin-top: 24rpx;
			margin-bottom: 22rpx;
		}

		.order_msg {
			width: 590rpx;

			.b_msg {
				font-weight: 400;
				font-size: 21rpx;
				color: #4C4948;
				line-height: 34rpx;
			}
		}

		.gzimage {
			.a_gz {
				font-weight: 400;
				font-size: 21rpx;
				color: #00828C;
				margin-top: -7rpx;
				margin-bottom: 14rpx;
			}

			.b_gz {
				width: 594rpx;
				height: 145rpx;

				image {
					width: 594rpx;
					height: 145rpx;
				}
			}
		}

		.gzms {

			.a_gz {
				font-weight: 400;
				font-size: 21rpx;
				color: #00828C;
				margin-top: 14rpx;
			}

			.gz_txt {
				width: 594rpx;
				height: 90rpx;
				border: 1rpx solid #eeeeee;
				margin-top: 14rpx;
				border-radius: 15rpx;
			}
		}
	}







	.btnItem {
		width: 682rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		margin-top: 70rpx;

		.order_btn {
			display: flex;
			flex-direction: column;

			.btnImg {
				width: 136rpx;
				height: 136rpx;

				image {
					width: 136rpx;
					height: 136rpx;
				}
			}

			.txt {
				font-weight: 400;
				font-size: 22rpx;
				color: #FFFFFF;
				line-height: 55rpx;
				text-align: center;

			}
		}
	}
</style>